<template>
	<view>
	<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回" @clickRight="backWork" right-icon="home"
		:title=this.titleName @clickLeft="back" />
			<uni-table ref="table" border stripe style="margin-top: 0px;" >
				<uni-tr class="firstTable">					
					<uni-th class="firstTh" width="50" align="center">商品</uni-th>
					<uni-th width="60" align="center">库存数量</uni-th>
					<uni-th width="80" align="center">成本金额</uni-th>
					<uni-th width="80" align="center">销售金额</uni-th>
					<uni-th width="100" align="center">详情</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td class="firstTd" align="center" :class="item.chainId == null?'self':'other'">{{ item.commodityName}}</uni-td>
					<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.quantity }}</uni-td>
					<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.costAmount }}</uni-td>		
					<uni-td align="center" :class="item.chainId == null?'self':'other'">{{ item.salesAmount }}</uni-td>
					<uni-td align="center" >
						<button v-show="(item.exist)" type="primary" size="mini" @click="toggleImg('center',item.barcode)">图片</button>
						<button type="primary" size="mini" @click="toggle('center',item.barcode)">
							详情
						</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			
			<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff"  @touchmove.prevent :round="30" mode="bottom" >
					<scroll-view :scroll-top="scrollTop" scroll-y="true"  @touchmove.stop @scroll="scroll">
					  <view class="popup-content" >
					  	<text style="padding-left: 40px;border-bottom: 30px; font-weight: 550;">
					  		货品库存跟踪:{{barcode}}
					  	</text>
					  	<uni-table  border stripe  style="position: relative; top: 10px;">
					  		<uni-tr>
					  			<uni-th width="100" align="center">发生日期</uni-th>
					  			<uni-th width="90" align="center">描述</uni-th>	
					  			<uni-th width="50" align="center">数量</uni-th>
								<uni-th width="150" align="center">店铺名称</uni-th>
					  			<uni-th width="50" align="center">编码</uni-th>
					  			<uni-th width="80" align="center">单据号</uni-th>
					  		</uni-tr>
					  		<uni-tr v-for="(item, index) in details" :key="index">
					  			<uni-td align="center">{{ item.createTime }}</uni-td>
					  			<uni-td align="center">{{ item.describe }}</uni-td>
					  			<uni-td align="center">{{ item.number }}</uni-td>
								<uni-td align="center">{{ item.chainName }}</uni-td>
					  			<uni-td align="center">{{ item.code }}</uni-td>
					  			<uni-td align="center">{{item.documentCode}}</uni-td>
					  		</uni-tr>
					  	</uni-table>
					  </view>
					</scroll-view>
				</uni-popup>
				
				<!-- 普通弹窗 -->
					<uni-popup ref="popupImg" background-color="#fff"  @touchmove.prevent :round="30" mode="bottom" >
						<scroll-view :scroll-top="scrollTop" scroll-y="true"  @touchmove.stop @scroll="scroll">
						  <view class="popup-content" >
							  <text style="font-weight: 550; position: relative; left: 6%;">商品条码:{{this.barcode}}</text>
						  	 <image :src="imgFilePath" style="top: 5%;left: 5%;"></image>
						  </view>
						</scroll-view>
					</uni-popup>
	</view>
</template>

<script>
	import {baseUrl} from 'libs/util/global'
	export default {
		data() {
			return {
				//滚动条
				scrollTop: 0,
				old: {
				    scrollTop: 0
				   },            
				barcode: '',
				loading: false,
				year: '',
				quanter:'',
				titleName:'',
				chainStoreName:'',
				brandName: '',
				storeId: '',
				brandId: '',				
				tableData: [],
				authority: null,
				details:[],
				imgFilePath: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.storeId) //店铺信息
			console.log(option.year)
			console.log(option.quanter)
			console.log(option.brandId)
			this.storeId = option.storeId
			this.year = option.year
			this.quanter = option.quanter
			this.brandId = option.brandId
			this.chainStoreName = option.chainStoreName
			this.brandName = option.brandName
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					console.log(res.data + "登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
			
		},
		mounted() {
			this.getInfo(),
			this.getBoxHeight(),
			this.initTitleName()
		},
		methods: {
			// 初始化页面标题
			initTitleName(){
				if(this.brandName.startsWith("千禧宝贝")){
					this.titleName =  this.chainStoreName.substring(0,6) + this.year + this.quanter + this.brandName.substring(4,this.brandName.length)
				}else{
					this.titleName = this.chainStoreName.substring(0,6) + this.year + this.quanter + this.brandName.substring(0,3)
				}
			},
			
			//滚动条
					scroll: function(e) {
						this.old.scrollTop = e.detail.scrollTop
					},
			//查看详情
			toggle(type,barcode) {
				uni.showLoading({
				title: '加载中.....'
				})
				console.log("条码:"+barcode)
				this.barcode = barcode
							this.type = type
							// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
							this.$refs.popup.open(type)
							
							uni.request({
								url: baseUrl+'/sales/details',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									userId: this.loginUserId,
									userType: this.loginUserType,
									storeId: this.storeId,
									barcode: barcode,
								},
								success: (res) => {
									console.log(res)
									setTimeout(function() {
										uni.hideLoading();
									}, 100);
									this.details = res.data.data									
								}
							})
						},
			// 查看图片			
			toggleImg(type,barcode){
				this.barcode = barcode
				this.$refs.popupImg.open(type)
				uni.request({
					url: baseUrl+'/getImg/'+ barcode,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {
					},
					success: (res) => {
						console.log(res)	
						if(res.data.msg != null){
							this.imgFilePath = res.data.msg
						}else{
							this.imgFilePath = "/static/absent.jpg"
						}							
					}
				})
			},			
			//获取盒子高度
			getBoxHeight() {
				uni.createSelectorQuery()
					.in(this)
					.select('.table-header')
					.boundingClientRect(rect => {
						if (rect) {
							this.boxHeight = rect.height;
						}
					})
					.exec();
			},
			
			// 左上角返回按钮
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			backWork(){
				uni.switchTab({
					url: '/pages/work/work'
					})
			},
			// 获取信息
			getInfo() {
				uni.showLoading({
				title: '加载中.....'
				})
				uni.request({
					url: baseUrl+'/chain/inventory/commodity',
					header: {
						'content-type': 'application/json'
					},
					method: 'post',
					data: {
						year: this.year,
						quanter: this.quanter,
						storeId: this.storeId,
						brandId: this.brandId
					},
					success: (res) => {
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						if (res.data.data != null) {
							console.log("// 连锁店信息"+res.data)
							if(this.authority == 2){
								for( let index = 0; index< res.data.data.length; index++){
									console.log(res.data.data[index])
									res.data.data[index].costAmount = "0.00"
								}								
								this.tableData = res.data.data	
							}else{
								this.tableData = res.data.data
							}
							
						} 
					}
				})
				
				
			},
		
	
		}
	}
</script>

<style>
	.self{
		color: black;
	}
	.other{
		color: blue;
	}
	.content {
			width: 100%;
			height: 100vh;
		}

	.table-header {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 99999;
		background-color: #fff;
	}

	.popup-content {
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 500rpx;
			width: 650rpx;
			border-radius: 10%;
			background-color: #fff;
		}

	//冻结表头第一列
 	 .firstTh{
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 0;
	} 

	/* /deep/ .uni-table-tr {
		overflow: visible;
		background-color: #fff;
	} */

	/deep/ .firstTd {
		position: sticky;
		left: 0;
		top: 0;
		background-color: lavenderblush;
		z-index: 0;
	} 
</style>
